import LineTem from '@v/echarts/Line.vue'
import Pie from '@v/echarts/Pie.vue';
import echarts from 'echarts'
export default {
    name: 'Mydata',
    components: {
        LineTem,
        Pie,
    },
    data() {
        return {
            value1: '',
            TrendTimeInterval: '',
            pickerOptions: {},
            percentageData: [
                {
                    name: 'AIBox',
                    percentage: 40
                },
                {
                    name: 'AIBox',
                    percentage: 20
                },
                {
                    name: 'AIBox',
                    percentage: 50
                },
                {
                    name: 'AIBox',
                    percentage: 90
                },
                {
                    name: 'AIBox',
                    percentage: 65
                },
                {
                    name: 'AIBox',
                    percentage: 20
                }
            ],
            deviceType: [],
            setTypeData: [
                {
                    name: '在线',
                    value: '1'
                },
                {
                    name: '离线',
                    value: '2'
                },
                {
                    name: '全部',
                    value: 'null'
                }
            ],
            deviceData: [
                {
                    clientName: 'ALX2019061001',
                    type: '在线'
                },
                {
                    clientName: 'ALX2019061001',
                    type: '在线'
                },
                {
                    clientName: 'ALX2019061001',
                    type: '在线'
                },
                {
                    clientName: 'ALX2019061001',
                    type: '在线'
                },
                {
                    clientName: 'ALX2019061001',
                    type: '在线'
                },
                {
                    clientName: 'ALX2019061001',
                    type: '在线'
                },
                {
                    clientName: 'ALX2019061001',
                    type: '在线'
                },
                {
                    clientName: 'ALX2019061001',
                    type: '在线'
                }
            ],
            statusData:[
                {
                    percentage:50
                },
                {
                    percentage:20
                },
                {
                    percentage:60
                },
                {
                    percentage:90
                }
            ]
        }
    },
    computed: {
        myDataOption() {
            var option = {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['电量', '温度'],
                    orient: 'vertical',
                    x: "right",
                    y: "center",
                    padding: 10,
                    textStyle: {
                        color: '#85899c',
                        fontSize: '14',
                    },
                },
                calculable: true,
                xAxis: {
                    name: '',
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        textStyle: {
                            color: '#85899c',
                            fontSize: '14',
                        },
                    },
                    // axisTick: {
                    //     lineStyle: { 
                    //         color: '#b3d2f1' 
                    //     }    // x轴刻度的颜色
                    // },
                    splitLine: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: '#9da4af',//x轴的颜色
                            width: 2
                        }
                    },
                    //data: this.optionData.trendData.xData,
                    data: ['2:00', '4:00', '8:00', '10:00', '14:00', '16:00', '18:00', '20:00', "22:00"],
                },
                yAxis: {
                    name: '',
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#85899c',
                            fontSize: '16',
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#9da4af',//x轴的颜色
                            width: 2
                        }
                    },
                    // axisTick: {
                    //     lineStyle: { 
                    //         color: '#b3d2f1' 
                    //     }  //y轴坐标刻度颜色
                    // },
                },
                series: [{
                    //name: '电量',
                    //data: this.optionData.trendData.yData,
                    data: [210, 200, 300, 210, 250, 500, 520, 120, 320],
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                    offset: 0,
                                    color: '#f86a7b'
                                },
                                {
                                    offset: 1,
                                    color: '#f86a7b'
                                },
                                ]
                            ),
                            lineStyle: {
                                color: '#f86a7b'
                            }
                        }
                    },
                },
                {
                    //name: '温度',
                    //data: this.optionData.trendData.yData,
                    data: [140, 240, 350, 450, 250, 550, 570, 150, 390],
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                    offset: 0,
                                    color: '#01caff'
                                },
                                {
                                    offset: 1,
                                    color: '#01caff'
                                },
                                ]
                            ),
                            lineStyle: {
                                color: '#01caff'
                            }

                        }
                    },
                }
                ]
            }
            return option;
        },
        exceptionOption() {
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    //data: this.optionData.temData.legendData
                    //data: ['W036', 'W22', 'W055', 'W018', 'W026', "其他"]
                },
                color: ["#026cd2", "#9a59b5", "#01caff"],
                series: [{
                    name: '设备异常',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    //data: this.optionData.temData.seriesData,
                    data: [{
                        name: '',
                        value: 50,
                    },
                    {
                        name: '',
                        value: 30,
                    },
                    {
                        name: '',
                        value: 20,
                    }
                    ]
                }]
            }
            return option;
        },
        statusOption() {
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    //data: this.optionData.temData.legendData
                    //data: ['W036', 'W22', 'W055', 'W018', 'W026', "其他"]
                },
                color: ["#026cd2", "#9a59b5", "#01caff"],
                series: [{
                    name: '设备异常',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    //data: this.optionData.temData.seriesData,
                    data: [{
                        name: '',
                        value: 50,
                    },
                    {
                        name: '',
                        value: 30,
                    },
                    {
                        name: '',
                        value: 20,
                    }
                    ]
                }]
            }
            return option;
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        myDataEchart() {

        },
        customColorMethod(percentage) {
            if (percentage < 30) {
                return '#409eff';
            } else if (percentage < 70) {
                return '#e6a23c';
            } else {
                return '#67c23a';
            }
        },
        increase() {
            this.percentage += 10;
            if (this.percentage > 100) {
                this.percentage = 100;
            }
        },
        decrease() {
            this.percentage -= 10;
            if (this.percentage < 0) {
                this.percentage = 0;
            }
        }
    },
}